<template>
    <PageWrapper>
      <n-card :bordered="false" class="mb-3 proCard">
        <n-space align="center">
          <n-input-group style="width: 1280px">
            <div style="margin-left: 10px !important;display: flex;align-items: center;">
                <div style="width: 60px;">账号：</div>
                <n-input
                style="width: 100%;margin-left: 20px;"
                v-model:value="params.username"
                clearable
                placeholder="请输入账号"
                @keyup.enter="reloadTable"
                />
            </div>
          
            <div style="margin-left: 10px !important;display: flex;align-items: center;">
              <div style="width: 80px;">手机号：</div>
              <n-input
                style="width: 100%;margin-left: 5px;"
                v-model:value="params.mobile"
                clearable
                placeholder="请输入手机号"
                @keyup.enter="reloadTable"
              />
            </div>
            <div style="margin-left: 20px !important;display: flex;align-items: center;">
              <n-select v-model:value="params.agents_id" placeholder="请选择用户角色" style="width: 200px;" :options="options" clearable />
            </div>
            <n-button type="primary" style="margin-left: 40px !important;" @click="reloadTable">
              <template #icon>
                <n-icon>
                  <SearchOutlined />
                </n-icon>
              </template>
              查询
            </n-button>
          </n-input-group>
        </n-space>
      </n-card>
      <n-card :bordered="false" class="proCard">
        <BasicTable
          :columns="columns"
          :request="loadDataTable"
          :row-key="(row) => row.id"
          ref="basicTableRef"
          :actionColumn="actionColumn"
          @update:checked-row-keys="onCheckedRow"
          :scroll-x="5500"
        >
          <template #tableTitle>
            <n-space align="center">
              <n-button type="primary" @click="openCreateDrawer">
                <template #icon>
                  <n-icon>
                    <FileAddOutlined />
                  </n-icon>
                </template>
                添加
              </n-button>
            </n-space>
          </template>
        </BasicTable>
      </n-card>
  
      <CreateDrawer
        ref="createDrawerRef"
        :title="drawerTitle"
        :roleList="roleData"
        @change="reloadTable"
      />

      <CreateDrawerff
        ref="createDrawerRefff"
        :title="drawerTitleff"
        :roleList="roleDataff"
      />
    </PageWrapper>
  </template>
  
  <script lang="ts" setup>
    import { h, reactive, ref, onMounted } from 'vue';
    import { useMessage } from 'naive-ui';
    import { BasicColumn, BasicTable, TableAction } from '@/components/Tablex';
    import { getmerchantsList } from '@/api/system/user';
    import { FileAddOutlined, SearchOutlined } from '@vicons/antd';
    import { roleList } from '@/api/system/role';
    import { delUser } from '@/api/system/user';
    import CreateDrawer from './CreateDrawer.vue';
    import CreateDrawerff from './CreateDrawerff.vue';
    import { columns } from './columns';
  
    const message = useMessage();
    const basicTableRef = ref();
    const rowKeys = ref([]);
    const rowKeysName = ref([]);
    const tableData = ref();
    const createDrawerRef = ref();
    const drawerTitle = ref('添加商户');
    const roleData = ref([]);
    const createDrawerRefff = ref();
    const drawerTitleff = ref('会员卡发放');
    const roleDataff = ref([]);
  
    const params = reactive({
      username: '',
      nickname: '',
      mobile: '',
      agents_id: null,
    });

    const options = ref([
      {
        label: "平台商户",
        value: 1,
      }, {
        label: '代理商商户',
        value: 2
      }, {
        label: '员工商户',
        value: 3
      }
    ])
  
    const actionColumn: BasicColumn = reactive({
      width: 200,
      title: '操作',
      key: 'action',
      fixed: 'right',
      align: 'center',
      render(record) {
        return h(TableAction as any, {
          actions: [
            {
              label: '删除',
              onPositiveClick: handleDelete.bind(null, record),
              isConfirm: true,
              confirmContent: '您确定要删除吗？',
            }, {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            }, {
              label: '发放会员卡',
              onClick: handleFafang.bind(null, record),
            },
          ],
        });
      },
    });
  
    const loadDataTable = async (res) => {
      const result = await getmerchantsList({ ...params, ...res });
      tableData.value = result.list;
      return result;
    };
  
    function onCheckedRow(keys) {
      rowKeys.value = keys;
      rowKeysName.value = tableData.value
        .filter((item) => {
          return keys.includes(item.id);
        })
        .map((item) => {
          return item.username;
        })
        .join('，');
    }
  
    function reloadTable() {
      basicTableRef.value.reload();
    }
  
    function openCreateDrawer() {
      const { openDrawer } = createDrawerRef.value;
      openDrawer();
    }
  
    function handleEdit(record: Recordable) {
      drawerTitle.value = '编辑用户';
      const { openDrawer } = createDrawerRef.value;
      openDrawer(record.id);
    }

    function handleFafang(record: Recordable) {
      drawerTitle.value = '会员卡发放';
      const { openDrawer } = createDrawerRefff.value;
      openDrawer(record.id);
    }
  
    function handleDelete(record: Recordable) {
      delUser({ id: record.id }).then(() => {
        message.success('删除成功');
        reloadTable();
      });
    }
  
    onMounted(async () => {
      const res = await roleList({ noPage: true });
      roleData.value = res.list.map((item: any) => {
        return {
          value: item.id,
          label: item.name,
        };
      });
    });
  </script>
  
  <style lang="less" scoped></style>
  